<template>
  <view class="page container">
    <u-form
      :model="basicForm"
      :rules="rules"
      labelPosition="top"
      ref="form"
      labelWidth="auto"
      :labelStyle="{
        fontSize: '14px',
        color: '#B2B2B2',
        lineHight: '20px'
      }"
    >
      <view class="basic-style">
        <u-form-item label="物料大类" prop="provisionBroad" required>
          <h-dropdown
            class="w-100"
            keyName="categoryName"
            placeholder="请选择"
            :api="api.queryProvisionBroadList"
            v-model="basicForm.provisionBroad"
            dataKey="result"
            @change="exportWarehouseChange"
          />
        </u-form-item>
        <u-form-item label="物料小类" prop="provisionSmall" required>
          <h-dropdown
            class="w-100"
            keyName="categoryName"
            placeholder="请选择"
            :columns="smallList"
            v-model="basicForm.provisionSmall"
            dataKey="result"
            @change="provisionSmallChange"
          />
        </u-form-item>
        <u-form-item label="物料编号" prop="materialBillId">
          <u--input disabled placeholder="请输入物料编号" v-model="basicForm.materialBillId"></u--input>
        </u-form-item>
        <u-form-item label="物料名称" prop="materialName" required>
          <h-select-material-input-popup
            style="width: 100%"
            v-model="basicForm.materialName"
            placeholder="请选择物料名称"
            border="surround"
            :materialFlag="true"
            auditStatus="2"
            :provisionSmall="basicForm.provisionSmall"
            @change="materialNameBack"
          ></h-select-material-input-popup>
        </u-form-item>
        <u-form-item label="规格型号" prop="specification">
          <u--input disabled placeholder="请输入规格型号" v-model="basicForm.specification"></u--input>
        </u-form-item>
        <u-form-item label="单位" prop="unit">
          <h-select-input-tag
            disabled
            class="w-100"
            v-model="basicForm.unit"
            objectField="basicForm.unit"
            placeholder="请选择单位"
            border="surround"
            dictName="unit_type"
          ></h-select-input-tag>
        </u-form-item>
        <u-form-item label="供应商" prop="companName">
          <h-select-customer-input-popup
            style="width: 100%"
            v-model="basicForm.companName"
            objectField="basicForm.companName"
            commercialType="2"
            placeholder="请选择供应商"
            border="surround"
          ></h-select-customer-input-popup>
        </u-form-item>
        <u-form-item label="品牌" prop="brand">
          <u--input disabled placeholder="请输入品牌" v-model="basicForm.brand"></u--input>
        </u-form-item>
        <u-form-item label="领用数量" prop="recipientsNum" required>
          <u--input type="number" v-number-normal placeholder="请输入数量" v-model="basicForm.recipientsNum"></u--input>
        </u-form-item>

        <u-form-item label="物料用途" prop="remark">
          <u--textarea confirm-type="send" v-model="basicForm.remark" placeholder="请输入物料用途"></u--textarea>
        </u-form-item>
      </view>

      <view class="space-x-1 mt-1" style="display: flex">
        <u-button type="primary" text="保存" :loading="loading" @click="onSubmit"></u-button>
        <u-button type="primary" text="关闭" :loading="loading" @click="onClose"></u-button>
      </view>
    </u-form>
  </view>
</template>

<script>
import { queryProvisionBroadList, queryProvisionSmallList } from '@/api/purchase/ErpPurchaseCannibalizeForm'

export default {
  name: 'MaterialForm',
  props: {
    teamId: {
      type: [String, Number],
      default: '',
    },
    companyId: {
      type: [String, Number],
      default: '',
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    datailDisabled: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      api: {
        queryProvisionBroadList,
      },
      smallList: [],
      loading: false,
      basicForm: {
        provisionBroad: '',
        provisionSmall: '',
        materialBillId: '',
        materialName: '',
        specification: '',
        unit: '',
        companName: '',
        brand: '',
        recipientsNum: '',
        remark: '',
      },
      rules: {
        provisionBroad: [{ required: true, message: '请选择采购大类!', trigger: 'blur' }],
        provisionSmall: [{ required: true, message: '请选择采购小类!', trigger: 'blur' }],
        materialName: [{ required: true, message: '请选择物料名称!', trigger: 'change' }],
        recipientsNum: [
          { required: true, message: '请输入数量!', trigger: 'blur' },
          { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数!' },
        ],
      },
    }
  },
  created() {},
  methods: {
    materialNameBack(material) {
      this.$set(this.basicForm, 'materialBillId', material.materialBill) // 物料编码
      this.$set(this.basicForm, 'specification', material.specification) // 规格型号
      this.$set(this.basicForm, 'unit', material.unit) // 单位
      this.$set(this.basicForm, 'brand', material.brand) // 品牌
      this.$set(this.basicForm, 'recipientsNum', null) //数量
      this.$set(this.basicForm, 'materialName_dictText', material.materialName)
    },
    provisionSmallChange() {
      this.$set(this.basicForm, 'materialName', null) // 物料名称
      this.$set(this.basicForm, 'materialBillId', null) // 物料编码
      this.$set(this.basicForm, 'specification', null) // 规格型号
      this.$set(this.basicForm, 'unit', null) // 单位
      this.$set(this.basicForm, 'brand', null) // 品牌
      this.$set(this.basicForm, 'amount', null) //数量
      //迭代16.7： 9、物资调拨单子表新增中字段“供应商”隐藏。
      // this.$set(this.basicForm, 'supplier', null)//供应商
    },
    exportWarehouseChange(id) {
      this.provisionSmallChange()
      this.smallList = []
      this.$set(this.basicForm, 'provisionSmall', '')
      // if (id) {
      //   this.findProvisionSmallList(id)
      // }
    },
    findProvisionSmallList(value) {
      const parentId = value
      queryProvisionSmallList({ parentId }).then((res) => {
        if (res.success) {
          const data = res.result.map((item) => {
            return { id: item.id, categoryName: item.categoryName }
          })
          this.smallList = [data]
        } else {
          this.$u.toast(res.message)
        }
      })
    },
    reset() {
      this.$refs.basicForm.resetFields()
    },
    async onSubmit() {
      await this.$refs.form.validate()
      if (!this.index) {
        this.$emit('submit', [
          {
            id: parseInt(Math.random() * 1000000000000),
            ...this.basicForm,
          },
          this.index,
        ])
      } else {
        this.$emit('submit', [this.basicForm, this.index])
      }
    },
    onClose() {
      this.$emit('close')
    },
  },
  watch: {
    'basicForm.provisionBroad'(val) {
      if (val) {
        this.findProvisionSmallList(val)
      }
    },
  },
}
</script>

<style scoped></style>
